<template>
    <div id="foot">
        <ul>
            <li :class="{'active': page == 'home'}">
                <router-link to="/" replace>产品绑定</router-link>
            </li>
            <li :class="{'active': page == 'product'}">
                <router-link to="/product" replace>我的产品</router-link>
            </li>
            <li :class="{'active': page == 'aftersale'}">
                <router-link to="aftersale" replace>我的售后</router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    page: {
      default: "home",
      type: String
    }
  }
};
</script>
<style scoped>
#foot {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
}
#foot ul {
  width: 375px;
  height: 50px;
  background: #000;
  display: flex;
}
#foot ul li {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}
#foot ul li a {
  color: #fff;
  text-decoration: none;
}
.active > a {
  color: #ffce43 !important;
}
</style>
